<template>
  <div class="Index">
    <router-view></router-view>
    <ul class="footnav">
    	<router-link tag="li" to="/Home" class="unsele" active-class="sele">
    		<div></div>
    		<p>主页</p>
    	</router-link>
    	<router-link tag="li" to="/Shop" class="unsele" active-class="sele">
    		<div></div>
    		<p>商城</p>
    	</router-link>
    	<router-link tag="li" to="/Choice" class="unsele" active-class="sele">
    		<div></div>
    		<p>选菜</p>
    	</router-link>
    	<router-link tag="li" to="/Discover" class="unsele" active-class="sele">
    		<div></div>
    		<p>发现</p>
    	</router-link>
    	<router-link tag="li" to="/User" class="unsele" active-class="sele">
    		<div></div>
    		<p>我的</p>
    	</router-link>
    </ul>
  </div>
</template>

<script>

export default {
  name: 'Index',
  data () {
    return {
      
    }
  }
}
</script>

<style scoped>
	.footnav{
		position: fixed;
		bottom: 0;
		width: 100%;
		text-align: center;
		font-size: 0.7rem;
		
		padding: 0.5rem 0;
		/* 底色 */
		background: rgb(72,56,43);
		color: rgb(195,173,136);
	}
	.footnav li{
		float: left;
		width: 20%;
	}
	.footnav li div{
		height: 1.3rem;
		width: 1.5rem;
		margin: 0.2rem auto;
		background-size: 100%;
		background-repeat: no-repeat;
	}
	.sele{
		color: rgb(106,180,57);
	}
	.footnav .unsele:nth-of-type(1) div{
		background-image: url(../../../static/icon/home_bottom_01.png);
	}
	.footnav .unsele:nth-of-type(2) div{
		background-image: url(../../../static/icon/home_bottom_02.png);
	}
	.footnav .unsele:nth-of-type(3) div{
		background-image: url(../../../static/icon/home_bottom_03.png);
	}
	.footnav .unsele:nth-of-type(4) div{
		background-image: url(../../../static/icon/home_bottom_04.png);
	}
	.footnav .unsele:nth-of-type(5) div{
		background-image: url(../../../static/icon/home_bottom_05.png);
	}
	.footnav .sele:nth-of-type(1) div{
		background-image: url(../../../static/icon/home_bottom_1.png);
	}
	.footnav .sele:nth-of-type(2) div{
		background-image: url(../../../static/icon/home_bottom_2.png);
	}
	.footnav .sele:nth-of-type(3) div{
		background-image: url(../../../static/icon/home_bottom_3.png);
	}
	.footnav .sele:nth-of-type(4) div{
		background-image: url(../../../static/icon/home_bottom_4.png);
	}
	.footnav .sele:nth-of-type(5) div{
		background-image: url(../../../static/icon/home_bottom_5.png);
	}
</style>